import Vue from 'vue/dist/vue'
let tag = 'script'
export default {
    baseCode:
`<template>
    <div>{{ name }} </div>
</template>
<${tag}>
    export default {
        data () {
            return {
                name: 'text'
            }
        }
    }
</${tag}>
<style></style>`,
    compileOptions(vm, value, path2Id) {
        let vueOpts = this.getOptions(value)
        let template = vueOpts.template
        let script = vueOpts.script

        /**
         * deal with scripts
         */
        script = script.replace(/\$import\((.+?)\)/g, (w, k) => {
            let key = ('/' + vm.$eval(k).trim()).replace(/\/+/g, '/').substr(1)
            if (path2Id && path2Id[key]) {
                key = path2Id[key]
            }
            return `"$import('${key}')"`
        })
        let options = {...vm.$eval(script), render: () => {}}
        if (template) {
            options.render = Vue.compile(template).render
        }
        /**
         *  deal with css
         * @type {*[]}
         */
        options.styles = []
        if (!template && !vueOpts.style) {
            vueOpts.style = value
        }
        options.style = (vueOpts.style || '').replace(/@import\((.+?)\)/g, (w, k) => {
            let key = ('/' + vm.$eval(k).trim()).replace(/\/+/g, '/').substr(1)
            if (path2Id && path2Id[key]) {
                options.styles.push(path2Id[key])
            }
            return ""
        }).trim()
        while(options.style.startsWith(';')) {
            options.style = options.style.substr(1).trim()
        }
        return options
    },
    getEleVue(vm, value, path2Id) {
        return vm.$stringify({
            options: this.compileOptions(vm, value, path2Id)
        }, true)
    },
    getEncryptedEleVue(vm, value, path2Id) {
        return vm.$encrypt(this.getEleVue(vm, value, path2Id))
    },
    getOptions(value) {
        let template = this.getTemplate(value)
        let style = this.getStyle(value)
        let script = this.getScript(value)
        return {template, style, script}
    },
    getTemplate(value) {
        let template = this.getContentByTag(value, 'template')
        if (template == null || !template[1]) {
            return ""
        }
        return template[1]
    },
    getScript(value) {
        let script = this.getContentByTag(value, 'script')
        if (script == null || !script[1]) {
            script = '{}'
        } else {
            script = script[1].trim().replace(/export(?:.*?)default/, '')
        }
        return script
    },
    getStyle(value) {
        let style = this.getContentByTag(value, 'style')
        if (style == null || !style[1]) {
            return ""
        }
        return style[1]
    },
    getContentByTag(content, tag) {
        //  let reg = new RegExp(`(?<=<${tag}(.)*?>)([\\s\\S](?!<${tag}))*?(?=</${tag}>)`)
        return content.match(new RegExp(`<${tag}\\b[^>]*>([\\s\\S]*)<\\/${tag}>`))
    }
}
